<template>
  <div class="bg-white rounded-[20px] p-4 animate-fadeIn will-change-transform">
    <div class="flex flex-col gap-4">
      <div 
        v-for="(relatedWord, index) in relatedWords" 
        :key="index" 
        class="flex justify-between border-b border-black/10 pb-3 last:border-b-0 last:pb-0"
      >
        <div class="flex-shrink-0 mr-4 min-w-[100px]">
          <span 
            class="font-semibold text-blue-500 cursor-pointer" 
            @click="$emit('play-related-word', relatedWord.word)"
          >
            {{ relatedWord.word }}
          </span>
          <span v-if="relatedWord.partOfSpeech" class="text-sm text-black/60 mx-2">{{ relatedWord.partOfSpeech }}.</span>
        </div>
        <div v-if="relatedWord.definition" class="text-right text-[0.95rem] text-black/80 whitespace-pre-line">{{ relatedWord.definition }}</div>
      </div>
      
      <!-- 显示更多按钮 -->
      <div 
        v-if="hasMore" 
        class="text-center mt-2 cursor-pointer hover:bg-gray-100 py-1 rounded-md"
        @click="$emit('toggle-show-all')"
      >
        <span class="text-sm text-black/50 hover:text-black/70">
          {{ showAll ? '收起' : `更多派生词 (${totalRelatedCount - 3}) ›` }}
        </span>
      </div>
    </div>
    <div v-if="wordFamily" class="mt-4 text-right">
      <span class="inline-block bg-[rgba(92,39,151,0.3)] px-3 py-1 rounded-full text-sm text-black">
        {{ wordFamily }}
      </span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  relatedWords: {
    type: Array,
    required: true
  },
  hasMore: {
    type: Boolean,
    default: false
  },
  showAll: {
    type: Boolean,
    default: false
  },
  wordFamily: {
    type: String,
    default: ''
  },
  totalRelatedCount: {
    type: Number,
    default: 0
  }
});

defineEmits(['play-related-word', 'toggle-show-all']);
</script>

<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}
</style> 